<template>
  <div class="U000007-template1" style="position: relative;"
       :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <div class="circleBox">
      <div class="circleLeft">
        <span>余额</span>
        <div class="priceCir">
          <span>￥</span>
          <span class="pric">88</span>
        </div>
      </div>
      <div class="circleRight">充值</div>
    </div>
    <div class="circleBox-radius"></div>

  </div>
</template>

<script>
	// 自定义样式
	const css = function () {
		if(this.datas.preview_color) {
			const {
				preview_color,
				balance_bg_color,
				font_color,
				number_color,
				button_bg_color,
				button_color,
			} = this.datas;

			return `
			  .component-${this.id}{
            background-color: ${preview_color};
        }
        .component-${this.id} .circleBox{
            background-color: ${balance_bg_color};
        }
        .component-${this.id} .circleBox .circleLeft {
            color: ${font_color};
        }
        .component-${this.id} .circleBox .circleLeft .priceCir {
            color: ${number_color};
        }
        .component-${this.id} .circleRight {
            background-color: ${button_bg_color};
            color: ${button_color};
        }
        .component-${this.id} .circleBox-radius {
            background-image: radial-gradient(500px at 180px -310px, transparent, transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,${preview_color});
        }
    `;
		}
	};

	export default {
		props: ['id', 'datas', 'styles'],
    data() {
			return{
      }
    },
    mounted() {
    },
		computed: {
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
		},
    watch: {
    },

		methods: {
		},

	};
</script>

<style lang="less" scoped>
  // 默认
  .component-wrapper {
    display: flex;
    justify-content: center;
    width: 375px;
  }
  .circleBox {
    position: relative;
    width: 100%;
    height: 140px;
    border-radius: 15px;
    margin: 12px 12px 12px 12px;
    /*background-color: #4d4746;*/
    display: flex;
    align-items: center;
    justify-content: space-between;

    .circleLeft {
      margin-left: 20px;
      /*color: #ffd772;*/
      font-size: 13px;
      text-align: left;

      .priceCir {
        margin-top: 8px;
        margin-bottom: 14px;
        font-size: 13px;

        .pric {
          font-size: 28px;
        }
      }
    }

    .circleRight {
      width: 70px;
      height: 25px;
      /*background-color: #f6db97;*/
      border-radius: 15px;
      font-size: 14px;
      /*color: #494247;*/
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
    }
  }
  .circleBox-radius {
    position: absolute;
    left: 0;
    top: -35px;
    width: 375px;
    height: 200px;
    /* 用到了渐变  第一个值是圆形的大小(200px) 第二个值是左右移动(100px,由于盒子是200宽,100px正好在中间) 第三个值是上下移动  */
  /*background-image: radial-gradient(500px at 180px -310px, transparent, transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,#fff);*/
}
</style>
